import React from 'react';
import { Leaf, Heart, Users } from 'lucide-react';
export function ValueProposition() {
  const values = [{
    icon: <Leaf className="w-8 h-8 text-[#4a6b60]" />,
    title: 'Clean & Conscious',
    description: 'We carefully curate products with safe ingredients and sustainable practices for your wellbeing and our planet.'
  }, {
    icon: <Heart className="w-8 h-8 text-[#c89b9b]" />,
    title: 'Holistic Wisdom',
    description: 'Our approach combines skincare with wellness practices for a complete self-care experience.'
  }, {
    icon: <Users className="w-8 h-8 text-[#d7a27c]" />,
    title: 'Community Trusted',
    description: 'Real experiences and honest feedback from our growing community of ritual enthusiasts.'
  }];
  return <section className="py-16 px-4 md:px-8 lg:px-12 bg-[#f3f0eb]">
      <div className="max-w-7xl mx-auto">
        <h2 className="font-serif text-2xl md:text-3xl text-center mb-12 text-[#4a4a4a]">
          Discover the RitualGlow Difference
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {values.map((value, index) => <div key={index} className="bg-white p-8 rounded-lg shadow-sm flex flex-col items-center text-center">
              <div className="mb-4">{value.icon}</div>
              <h3 className="font-serif text-xl mb-3 text-[#4a4a4a]">
                {value.title}
              </h3>
              <p className="text-sm leading-relaxed">{value.description}</p>
            </div>)}
        </div>
      </div>
    </section>;
}